<template>
  <div>
    <FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav>

    <router-view></router-view>
  </div>
</template>

<script>
import FilmListTopNav from "../../components/FilmListTopNav.vue";

export default {
  props: [],
  components: {
    FilmListTopNav,
  },
  data() {
    return {
      fixed: false,
    };
  },

  methods: {},

  computed: {},

  watch: {},

  filters: {},

  beforeCreate() {},

  created() {},

  beforeMount() {},

  mounted() {
    window.addEventListener("scroll", (e) => {
        let top = document.documentElement.scrollTop
        // console.log('top',top)
        if(top >130) {
          this.fixed = true 
        } else {
          this.fixed = false
        }

    },true);
  },

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {},
};
</script>


<style  lang='scss'>
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #ffffff;
}
</style>
